/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-23 15:46:26
 */
import { FormBasicData, FormConfig, FormTEditor, FormUpload } from '@/components'
import { DoType, getDoTypeTitle } from '@/interfaces'
import { errorTips, rangePickerShowTime, successTips, valueFormat } from '@/utils'
import { isTrue } from '@/utils/tools'
import { clone, equals } from 'ramda'
import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue'
import { Options } from '@/store/modules/basicData'
import Movies from './movies'
const props = {
	visible: {
		type: Boolean as PropType<boolean>,
		required: true,
	},
	dataSource: {
		type: Object as PropType<defs.server.BannerEntity>,
	},
} as const
export default defineComponent({
	props,
	name: 'CreateIndex',
	emits: ['cancel', 'search'],
	setup(props, { emit }) {
		const rules = {
			img: [{ required: true, message: '请上传图片', trigger: 'change' }],
			jumpType: [{ required: true, type: 'number', message: '请选择跳转类型', trigger: 'change' }],
			articleId: [{ required: true, type: 'number', message: '请选择文章', trigger: 'change' }],
			status: [{ required: true, message: '请选择是否显示', trigger: 'change' }],
			url: [{ required: true, message: '请输入跳转链接', trigger: 'change' }],
			lang: [{ required: true, message: '请选择语言', trigger: 'change' }],
			sort: [{ required: true, type: 'number', message: '请输入排序', trigger: 'change' }],
			moviesId: [{ required: true, type: 'number', message: '请选择电影', trigger: 'change' }],
		}
		const pageState = reactive({
			loading: false,
			visible: false,
			type: DoType.create,
			formData: {} as defs.server.BannerEntity,
		})
		function cancel() {
			pageState.type = DoType.create
			pageState.formData = {} as defs.server.BannerEntity
			pageState.loading = false
			emit('cancel')
		}
		async function submit() {
			const params = {
				id: pageState.formData.id,
				img: pageState.formData.img,
				sort: pageState.formData.sort,
				jumpType: pageState.formData.jumpType,
				status: pageState.formData.status,
				url: pageState.formData.url,
				remarks: pageState.formData.remarks,
				lang: pageState.formData.lang,
				moviesId: pageState.formData.moviesId,
			}
			const func = equals(pageState.type, DoType.create)
				? API.server.banner.createBanner.request
				: API.server.banner.updateBanner.request
			pageState.loading = true
			const { success, msg } = await func(params)
			pageState.loading = false
			if (success) {
				successTips(`${getDoTypeTitle(pageState.type)}成功`)
				cancel()
				emit('search')
				return
			}
			errorTips(msg)
		}
		watch(
			() => props.visible,
			(visible) => {
				if (visible) {
					pageState.formData = clone(props.dataSource) ?? {} as defs.server.BannerEntity
					pageState.type = isTrue(props.dataSource?.id) ? DoType.edit : DoType.create
				}
			}
		)
		const imgDisabled = computed(() => {
			if (equals(pageState.formData.jumpType, 30)) {
				return isTrue(pageState.formData.moviesId)
			}
			return false
		})
		return () => (
			<div>
				<a-modal
					title={`${getDoTypeTitle(pageState.type)}轮播图`}
					visible={props.visible}
					onCancel={cancel}
					footer={null}
					centered
					confirmLoading={pageState.loading}
				>
					<a-form
						class="ant-advanced-search-form"
						labelCol={{ span: 6 }}
						wrapperCol={{ span: 18 }}
						model={pageState.formData}
						rules={rules}
						onFinish={submit}
					>
						<a-row>
							<a-col span={24}>
								<a-form-item name="img" label="图片">
									<FormUpload v-model={[pageState.formData.img, 'src']}
										disabled={imgDisabled.value}
									></FormUpload>
								</a-form-item>
							</a-col>
							<a-col span={24}>
								<a-form-item name="lang" label="语言">
									<FormConfig prop="lang" v-model={[pageState.formData.lang, 'value']}
										onChange={() => {
											pageState.formData.moviesId = null as any
											pageState.formData.movies = undefined
											pageState.formData.img = ''
										}}
									/>
								</a-form-item>
							</a-col>
							<a-col span={24}>
								<a-form-item name="jumpType" label="跳转类型">
									<FormConfig prop="jumpType" v-model={[pageState.formData.jumpType, 'value']} />
								</a-form-item>
							</a-col>
							{
								equals(pageState.formData.jumpType, 30) &&
								(
									<a-col span={24}>
										<a-form-item name="moviesId" label="选择电影">
											<a-button type="link" onClick={() => {
												if (!isTrue(pageState.formData.lang)) {
													return errorTips('请先选择语言')
												}
												pageState.visible = true
											}}>{isTrue(pageState.formData.moviesId) ? pageState.formData.movies?.name : '选择电影'}</a-button>
										</a-form-item>
									</a-col>
								)
							}
							{
								equals(pageState.formData.jumpType, 40) &&
								(
									<a-col span={24}>
										<a-form-item name="url" label="跳转链接">
											<a-input v-model={[pageState.formData.url, 'value']} />
										</a-form-item>
									</a-col>
								)
							}
							<a-col span={24}>
								<a-form-item name="status" label="是否显示">
									<FormConfig prop="status" v-model={[pageState.formData.status, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={24}>
								<a-form-item name="sort" label="排序">
									<a-input-number min={0} v-model={[pageState.formData.sort, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={24}>
								<a-form-item name="remarks" label="备注">
									<a-textarea v-model={[pageState.formData.remarks, 'value']} rows={6} />
								</a-form-item>
							</a-col>

						</a-row>
						<div style={{ textAlign: 'center' }}>
							{[DoType.create, DoType.edit].includes(pageState.type) && (
								<a-button type="primary" loading={pageState.loading} html-type="submit">
									提交
								</a-button>
							)}
							<a-button onClick={cancel}>取消</a-button>
						</div>
					</a-form>
				</a-modal>
				<Movies
					v-model={[pageState.visible, 'visible']}
					lang={pageState.formData.lang}
					onSubmit={(data: defs.server.MovieEntity) => {
						pageState.formData.moviesId = data.id
						pageState.formData.movies = data
						pageState.formData.img = data.cover
					}}
				/>
			</div>
		)
	},
})
